<template>
    <div class="app-container">
        <!--工具栏-->
        <div class="head-container">
            <div v-if="crud.props.searchToggle">
                <!-- 搜索 -->
                <el-input v-model="query.blurry" clearable size="small" placeholder="订单号模糊搜索" style="width: 150px;"
                             class="filter-item" @keyup.enter.native="toQuery"/>
                <rrOperation :crud="crud"/>
            </div>
            <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
            <crudOperation :permission="permission" style="display: none;"/>
            <!--表单组件-->
            <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
                       :title="crud.status.title" width="500px">
                <el-form ref="form" :model="form" :rules="rules" size="small"
                         label-width="80px">
                                <el-form-item
                                        label="订单id">
                                        <el-input v-model="form.id" style="width: 370px;"/>
                                </el-form-item>
                                <el-form-item
                                        label="订单标题">
                                        <el-input v-model="form.title" style="width: 370px;"/>
                                </el-form-item>
                                <el-form-item
                                        label="商户订单编号">
                                        <el-input v-model="form.orderNo" style="width: 370px;"/>
                                </el-form-item>
                                <el-form-item
                                        label="支付类型，wx:微信支付，alipay:支付宝支付">
                                        <el-input v-model="form.paymentType" style="width: 370px;"/>
                                </el-form-item>
                                <el-form-item
                                        label="用户id">
                                        <el-input v-model="form.uid" style="width: 370px;"/>
                                </el-form-item>
                                <el-form-item
                                        label="支付产品id">
                                        <el-input v-model="form.productId" style="width: 370px;"/>
                                </el-form-item>
                                <el-form-item
                                        label="订单金额">
                                        <el-input v-model="form.totalAmount" style="width: 370px;"/>
                                </el-form-item>
                                <el-form-item
                                        label="订单二维码连接">
                                        <el-input v-model="form.codeUrl" style="width: 370px;"/>
                                </el-form-item>
                                <el-form-item
                                        label="是否删除" prop="isDel">
                                        <el-input v-model="form.isDel" style="width: 370px;"/>
                                </el-form-item>
                                <el-form-item
                                        label="订单状态">
                                        <el-input v-model="form.orderStatus" style="width: 370px;"/>
                                </el-form-item>
                                <el-form-item
                                        label="创建时间">
                                        <el-input v-model="form.createTime" style="width: 370px;"/>
                                </el-form-item>
                                <el-form-item
                                        label="更新时间">
                                        <el-input v-model="form.updateTime" style="width: 370px;"/>
                                </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="text" @click="crud.cancelCU">取消</el-button>
                    <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
                </div>
            </el-dialog>
            <!--表格渲染-->
            <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;">
                                <!--
                                <el-table-column v-if="columns.visible('id')"
                                                 prop="id"
                                                 label="ID"/>
                                -->
                                <el-table-column v-if="columns.visible('orderNo')"
                                                 width="160px"
                                                 prop="orderNo"
                                                 label="订单号"/>
                                <el-table-column v-if="columns.visible('title')"
                                                 prop="title"
                                                 label="订单标题"/>
                                
                                <el-table-column v-if="columns.visible('paymentType')"
                                                 prop="paymentType"
                                                 label="支付类型">
                                    <template slot-scope="scope">
                                        <div>
                                            <el-tag v-if="scope.row.paymentType === 'wxpay'" type="success">微信支付</el-tag>
                                            <el-tag v-if="scope.row.paymentType === 'alipay'" type="primary">支付宝支付</el-tag>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column v-if="columns.visible('username')"
                                                 prop="username"
                                                 label="用户名"/>
                                <el-table-column v-if="columns.visible('totalAmount')"
                                                 prop="totalAmount"
                                                 label="订单金额(元)"/>
                                <!--
                                <el-table-column v-if="columns.visible('productId')"
                                                 prop="productId"
                                                 label="支付产品id"/>
                                
                                <el-table-column v-if="columns.visible('codeUrl')"
                                                 prop="codeUrl"
                                                 label="订单二维码链接"/>
                                <el-table-column v-if="columns.visible('isDel')"
                                                 prop="isDel"
                                                 label="是否删除"/>
                                -->
                                <el-table-column v-if="columns.visible('orderStatusDesc')"
                                                 prop="orderStatusDesc"
                                                 label="订单状态"/>
                                <el-table-column v-if="columns.visible('createTime')"
                                                 width="150px"
                                                 prop="createTime"
                                                 label="创建时间">
                                    <template slot-scope="scope">
                                        <span>{{ parseTime(scope.row.createTime) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column v-if="columns.visible('updateTime')"
                                                 width="150px"
                                                 prop="updateTime"
                                                 label="更新时间">
                                    <template slot-scope="scope">
                                        <span>{{ parseTime(scope.row.updateTime) }}</span>
                                    </template>
                                </el-table-column>
                <!--
                <el-table-column v-permission="['admin','orderInfo:edit','orderInfo:del']" label="操作"
                                 width="150px" align="center">
                    <template slot-scope="scope">
                        <udOperation
                                :data="scope.row"
                                :permission="permission"
                        />
                    </template>
                </el-table-column>
                -->
            </el-table>
            <!--分页组件-->
            <pagination/>
        </div>
    </div>
</template>

<script>
    import CRUD, {crud, form, header, presenter} from '@crud/crud'
    import crudOrderInfo from '@/api/orderInfo'
    import rrOperation from '@crud/RR.operation'
    import crudOperation from '@crud/CRUD.operation'
    import udOperation from '@crud/UD.operation'
    import pagination from '@crud/Pagination'
    import MaterialList from "@/components/material";

    // crud交由presenter持有
    const defaultCrud = CRUD({
        title: 'OrderInfo',
        url: 'api/orderInfo',
        sort: 'id,desc',
        crudMethod: {...crudOrderInfo}
    })
    const defaultForm = {id: null, title: null, orderNo: null, paymentType: null, uid: null, productId: null, totalAmount: null, codeUrl: null, isDel: null, orderStatus: null, createTime: null, updateTime: null}
    export default {
        name: 'OrderInfo',
        components: {pagination, crudOperation, rrOperation, udOperation , MaterialList},
        mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
        data() {
            return {
                
                permission: {
                    add: ['admin', 'orderInfo:add'],
                    edit: ['admin', 'orderInfo:edit'],
                    del: ['admin', 'orderInfo:del']
                },
                rules: {
                    isDel: [
                        {
                            required: true,
                            message: '是否删除不能为空',
                            trigger: 'blur'
                        }
                    ]
                }            }
        },
        watch: {
        },
        methods: {
            // 获取数据前设置好接口地址
            [CRUD.HOOK.beforeRefresh]() {
                return true
            }, // 新增与编辑前做的操作
            [CRUD.HOOK.afterToCU](crud, form) {
            },
        }
    }


</script>

<style scoped>
    .table-img {
        display: inline-block;
        text-align: center;
        background: #ccc;
        color: #fff;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        vertical-align: middle;
        width: 32px;
        height: 32px;
        line-height: 32px;
    }

</style>
